﻿#loginBk {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url("/UI/imgs/loginBk.jpg");
  background-size: cover; }

#site-navi {
  background-color: transparent;
  position: fixed;
  z-index: 10;
  top: 0; }
  #site-navi.fix {
    background-color: rgba(0, 0, 0, 0.4); }
    #site-navi.fix a {
      color: #fff; }
    #site-navi.fix > #site-navi-enter {
      transition: opacity linear 1s;
      opacity: 100; }

#slogan {
  color: white;
  text-shadow: 3px 3px 5px black; }

#loginform-container {
  position: absolute;
  left: 70%; }

section {
  width: 100%;
  background-attachment: fixed;
  background-size: cover; }

#section1 {
  height: 100%;
  padding-top: 15rem; }

@-moz-keyframes downArrow {
  0% {
    background-position-y: 70%;
    opacity: 0.5; }
  70% {
    background-position-y: bottom;
    opacity: 1; }
  100% {
    background-position-y: 70%;
    opacity: 0.5; } }

@-webkit-keyframes downArrow {
  0% {
    background-position-y: 70%;
    opacity: 0.5; }
  70% {
    background-position-y: bottom;
    opacity: 1; }
  100% {
    background-position-y: 70%;
    opacity: 0.5; } }

@keyframes downArrow {
  0% {
    background-position-y: 70%;
    opacity: 0.5; }
  70% {
    background-position-y: bottom;
    opacity: 1; }
  100% {
    background-position-y: 70%;
    opacity: 0.5; } }

#navi-next {
  color: white;
  position: absolute;
  bottom: 1rem;
  width: 100%;
  background-image: url(/UI/imgs/more-down.gif);
  background-repeat: no-repeat;
  background-position: center 3rem;
  height: 5.5rem;
  background-size: auto 1.5rem;
  animation: downArrow linear 1s infinite; }
  #navi-next > h6 {
    text-align: center; }

#section2 {
  height: 100%;
  background-color: white; }

#section3 {
  height: 100%;
  background-image: url("/UI/imgs/section-3-bk.jpg"); }

#section4 {
  height: 100%;
  background-color: white; }

#section5 {
  height: 100%;
  background-image: url("/UI/imgs/section-5-bk.png"); }

#user-logined-panel {
  text-align: center;
  margin-top: 10rem; }

#ulp-himg {
  width: 12rem;
  height: 12rem;
  border-radius: 6rem;
  border: 5px solid white;
  display: block;
  margin: 0 auto 10px auto;
  background-size: cover; }
  #ulp-himg:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid white;
    box-shadow: 0 0 5px 0 white;
    animation: boom 3s ease-out infinite; }

#ulp-enter {
  margin-top: 10px;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 1.5rem;
  padding: 0 2rem; }
  #ulp-enter > i {
    font-size: 1.6rem; }
    #ulp-enter > i:before {
      color: #fff; }
  #ulp-enter:hover > i {
    color: #fff !important; }
    #ulp-enter:hover > i:before {
      color: #fff; }
